{%- liquid
  assign show_padding = true
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign card_title_color = 'text-body-inverse'

    else
      assign text_color = ''
      assign card_title_color = 'card-name'

  endcase



  assign mark = 'h6'
  if section.settings.enable_adjust_h_tag
    assign mark = section.settings.adjust_h_tag_to
  endif
%}
<div class="{{ background_color }} {{ text_color }} as-social-video {% if show_padding %}py-md-9 py-6{% else %}my-md-9 my-6{% endif %}">
  <div class="container">
    <div class="content-container">
      <div class="text-center mb-md-6 mb-4 mw-text-4 mx-auto">
        {%- if section.settings.heading != blank -%}
          <h2 class="mx-auto heading-limit">{{ section.settings.heading }}</h2>
        {%- endif -%}
        {% if section.settings.description != blank %}
          <div class="no-last-margin">{{ section.settings.description }}</div>
        {% endif %}
      </div>
    </div>
    <div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2">
      {% for block in section.blocks %}
        <div class="col">
          <div class="card rounded-3 bg-transparent h-100 border-0">
            <div class="position-relative">
              <div class="position-relative">
                {% if block.settings.youtube_link != blank %}
                  <!-- 弹窗 -->
                  <div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="youtubeFrame-{{ block.id }}" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-xl">
                      <div class="modal-content bg-transparent border-0">
                        <div class="ratio ratio-16x9">
                          <iframe class="embed-responsive-item as-youtube-video w-100" src="{{ block.settings.youtube_link }}?enablejsapi=1" allowfullscreen></iframe>
                        </div>
                      </div>
                    </div>
                  </div>
                {% endif %}
                <div class="video-card-{{ block.id }}">
                  {% if block.settings.image %}
                    {%- style -%}

.video-card-{{block.id}}::before {
  content: '';
  display: block;
  padding-bottom: calc({{ block.settings.image.height }}/{{ block.settings.image.width }} * 100%);
}

{%- endstyle -%}
                  {% elsif block.settings.youtube_link %}
                    {%- style -%}

.video-card-{{block.id}}::before {
  content: '';
  display: block;
  padding-bottom: 56%;
}

{%- endstyle -%}
                  {% endif %}
                  <div class="position-absolute top-0 start-0 w-100 h-100">
                    {% if block.settings.image == blank %}
                      <img alt="" class="rounded-3 w-100 h-100 object-fit-colver" src="https://img.youtube.com/vi/{{ block.settings.youtube_link | remove: 'https://www.youtube.com/embed/'}}/hqdefault.jpg">
                    {% else %}
                      <img src="{{ block.settings.image | img_url: 'master' }}" class="card-img-top rounded-3 w-100 h-100 object-fit-colver" alt="{{ block.settings.image.alt | escape}}">
                    {% endif %}
                  </div>
                </div>
                {% if block.settings.youtube_link != blank %}
                  <a class="stretched-link cursor-pointer" data-bs-target="#youtubeFrame-{{ block.id }}" data-bs-toggle="modal"></a>
                {% endif %}
              </div>
              {% if block.settings.youtube_link != blank %}
                <div class="position-absolute play-svg-position cursor-pointer" data-bs-target="#youtubeFrame-{{ block.id }}" data-bs-toggle="modal">
                  {% render 'icon-play' %}
                </div>
              {% endif %}
            </div>
            <div class="card-body text-start pt-2 pt-md-3 pb-6 px-0 no-last-margin">
              {% if block.settings.heading != blank %}
                <{{ mark }} class="{{ card_title_color }} h6 mb-2">{{ block.settings.heading }}</{{ mark }}>
              {% endif %}
              {% if block.settings.description != blank %}
                <div class="no-last-margin">{{ block.settings.description }}</div>
              {% endif %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
    {% if section.settings.button_label != blank %}
      <div class="text-center">
        {%- if section.settings.button_link != blank -%}
          <a {% render 'link', link: section.settings.button_link %} href="{{ section.settings.button_link }}" class="btn btn-outline-primary">
            {{ section.settings.button_label }}
          </a>
        {%- else -%}
          <div class="btn {{ first_button_class }}{{ btn_style }} btn-outline-primary disabled">
            {{ section.settings.button_label }}
          </div>
        {%- endif -%}
      </div>
    {% endif %}
  </div>
</div>
{% schema %}
{
  "name": "Social video",
  "tag": "section",
  "class": "social-video-section",
  "settings": [
    {
      "type": "select",
      "id": "color_schema",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "text",
      "id": "heading",
      "default": "Heading",
      "label": "Heading"
    },
    {
      "type": "header",
      "content": "H tag for headline in block"
    },
    {
      "type": "checkbox",
      "id": "enable_adjust_h_tag",
      "label": "Enable adjust H tag",
      "default": false
    },
    {
      "type": "select",
      "id": "adjust_h_tag_to",
      "label": "Adjust the H tag to",
      "options": [
        {
          "value": "h1",
          "label": "H1"
        },
        {
          "value": "h2",
          "label": "H2"
        },
        {
          "value": "h3",
          "label": "H3"
        },
        {
          "value": "h4",
          "label": "H4"
        },
        {
          "value": "h5",
          "label": "H5"
        },
        {
          "value": "h6",
          "label": "H6"
        }
      ],
      "default":   "h3"
    },
    {
      "type": "richtext",
      "id": "description",
      "default":"<p>Description</p>",
            "label": "Description"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          },
          {
            "type": "select",
            "id": "text_color",
            "label": "Text color",
            "options": [
              {
                "value": "white",
                "label": "White"
              },
              {
                "value": "black",
                "label": "Black"
              }
            ],
            "default": "black"
          }
        ],
        "blocks": [
          {
            "type": "video",
            "name": "Video",
            "settings": [
              {
                "type": "text",
                "id": "youtube_link",
                "label": "Youtube link",
                "info": "Only support Youtube video embed link",
                "default": "https://www.youtube.com/embed/_9VUPq3SxOc"
              },	
              {	
                "type": "image_picker",	
                "id": "image",	
                "label": "Image",	
                "info": "Only show image when the YouTube link is empty."	
              },
              {
                "type": "text",
                "id": "heading",
                "label": "Heading",
                "default": "Heading"
              },
              {
                "type": "richtext",
                "id": "description",
                "label": "Description"
              }
            ]
          }
        ],
        "presets": [
          {
            "name": "Social Video"
          }
        ]
      }
{% endschema %}